import _ from 'lodash';
import { Drawer } from 'antd';
import axios from 'axios';
import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';
import type { CardViewModel } from './interface.d';
import store from './store';
import styles from './style.module.less';
import { Icon_Github } from '@/components/icon';

const CardView = observer(({ item }: { item: CardViewModel }) => {
  return (
    <div className={styles.cards} style={item?.style || {}}>
      <div className={styles.framework}></div>
      <div className={styles.container}>
        <div className={styles.title}>
          <div className="flex-center">
            <img width={50} height={50} src={item?.logo} alt="logo" />
            <span className={styles.name}>{item?.title}</span>
          </div>
          <Icon_Github href={item?.github || ''} />
        </div>
        <p className={styles.about}>{item?.intro}</p>
        <div>相关资料</div>
        <div className={styles.material}>
          {_.map(item?.wikis || [], (wiki, index) => {
            return (
              <div key={wiki.address}>
                {`${index + 1}. `}
                <a href={wiki.address} target="_blank" rel="noreferrer">
                  {wiki.name}
                </a>
              </div>
            );
          })}
        </div>
        {(item?.wikis || []).length > 1 && (
          <div className={styles.more} onClick={() => store.onchange_visible(true)}>
            更多
          </div>
        )}
      </div>
    </div>
  );
});

const CardsView = observer(() => {
  const [list, setList] = useState<CardViewModel[]>([]);

  const query = () => {
    axios.get('/api/documents/list').then((res) => {
      const data = res.data;
      setList(data);
    });
  };
  useEffect(() => {
    query();
  }, []);

  return (
    <>
      {_.map(list, ({ key, ...rest }) => {
        return <CardView key={key} item={rest} />;
      })}
    </>
  );
});

const Documents = observer(() => {
  return (
    <div className={styles.documents}>
      <CardsView />
      <Drawer visible={store.visible} title="更多资料" onClose={() => store.onchange_visible(false)}>
        123
      </Drawer>
    </div>
  );
});

export default Documents;
